<template>
    <div id="app">
        <h1>hello</h1>
        <slider :slides="slides" :announcement="announcement"></slider>
        <bookList :books="latestUpdated" heading="最近更新" @onBookSelect="preview($event)"></bookList>
        <bookList :books="recommended" heading="编辑推荐" @onBookSelect="preview($event)"></bookList>
        <modal-dialog ref="dialog">
            <div slot="heading"></div>
            <div>
                <div v-if="selected">
                    <h2>{{ selected.title }}</h2>
                </div>
            </div>
        </modal-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import slider from './slider.vue'
    import bookList from './bookList.vue'
    import ModalDialog from "./components/dialog.vue"

    export default{
        components:{slider,bookList,ModalDialog},
        data(){
            return{
                selected:null,
                announcement:'',
                slides:[],
                latestUpdated:[],
                recommended:[]
            }
        },
        created(){
            this.$http.get('/data.json').then(res=>{
                this.announcement=res.body.announcement
                this.slides=res.body.slides
                this.latestUpdated=res.body.latestUpdated
                this.recommended=res.body.recommended
            })
        },
        methods:{
                preview (book) {
                    this.selected = book
                    this.$refs.dialog.open()
                }

        }
    }
    </script>

<style>
    .swiper-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .swiper-wrapper {
        height: 200px;
    }
    .swiper-slide img {
        max-width: 100%;
    }
    .swiper-slide {
        text-align: center;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
</style>
